<script setup lang="ts">
import RoomStatus from './components/RoomStatus.vue'
import RoomAction from './components/RoomAction.vue'
import RoomMessage from './components/RoomMessage.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { io } from 'socket.io-client'
import { userStore } from '@/stores'
import { getOrderDetailRequest } from '@/services/patient'

const list = ref<any[]>([])
const store = userStore()
const consult = ref<any>({})

const getOrderDetail = async () => {
  const res = await getOrderDetailRequest({ orderId: '6984588238528512' })
  console.log(res)
  consult.value = res.data
}
getOrderDetail()

// pnpm add socket.io-client  先安装包
let socket: any = null
onUnmounted(() => {
  socket.close()
})
onMounted(() => {
  // 我们前端的socket和后端的socket要建立连接，开始通信，必须将token值传递给服务器
  socket = io('https://consult-api.itheima.net', {
    auth: {
      token: `Bearer ${store.user?.token}`
    },
    query: {
      // 正常情况下，应该将id放在url的后面，通过url传递过来
      orderId: '6984588238528512'
    }
  })

  socket.on('connect', () => {
    // 建立连接成功
    console.log('和后端的socket连接成功')
  })

  // 历史记录
  socket.on('chatMsgList', (e: any) => {
    const arr: any[] = []
    e.data.forEach((item: any) => {
      arr.push({
        msgType: 31,
        msg: { content: item.createTime },
        createTime: item.createTime,
        id: item.createTime
      })
      arr.push(...item.items)
    })
    // 循环结束以后， 在将list数组追加好
    list.value.unshift(...arr)
    console.log('父组件：', list.value)
  })

  // 监听医生发送过来的数
  // 发请求和http不一样，不用async awiat， 也不用try。。catch。
  // 直接是监听的，这种前端设计模式： 发布订阅
  socket.on('receiveChatMsg', async (event: any) => {
    console.log(event)

    list.value.push(event)
  })

  socket.on('error', (e: any) => {
    // 错误异常消息
    console.log('error', e)
  })

  socket.on('disconnect', () => {
    // 已经断开连接
    console.log('disconnect')
  })
})
// 这个变量就是所有的对话的数组
// 所谓的聊天室软件，就是将当前页面所有消息的格式，所有的div都写出来，然后在通过v-if结合消息的类型，有条件去展示。对于我们这个项目来说，一条消息就是一个room-message 组件
// const msgList = ref<any[]>([{ type: 1 }, { type: 2 }, { type: 3 }, { type: 4 }, { type: 5 }])

const SendTextFn = (e: string) => {
  console.log('子组件传递过来的参数，接受一下：', e)
  socket.emit('sendChatMsg', {
    from: store.user?.id, // 当前登录这个系统的人
    to: consult.value?.docInfo?.id, // 这个是医生的id，想要向哪一个医生去咨询
    msgType: 1,
    msg: { content: e }
  })
}
</script>

<template>
  <div class="room-page">
    <cp-nav-bar title="问诊室" />
    <room-status></room-status>
    <room-message v-if="list.length > 0" :list="list"></room-message>
    <room-action @SendTextEvent="SendTextFn"></room-action>
  </div>
</template>

<style lang="scss" scoped>
.room-page {
  // padding-top: 90px;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--cp-bg);
  .van-pull-refresh {
    width: 100%;
    min-height: calc(100vh - 150px);
  }
}
</style>
